<template>
  <div>
    <Card>
      <Button style="margin: 10px 0;" type="primary" @click="exportExcel">导出为Csv文件</Button>
      <tables ref="tables" editable searchable search-place="top" v-model="tableData" :columns="columns" @on-delete="handleDelete"/>
        <Page :total="dataCount" :page-size="pageSize" show-total  @on-change="changepage"></Page>
    </Card>
  </div>
</template>

<script>
import Tables from "_c/tables";
import { getTableData } from "@/api/data";
export default {
  name: "tables_page",
  components: {
    Tables
  },
  data() {
    return {
      // 初始化信息总条数
      dataCount: 50,
      // 每页显示多少条
      pageSize: 10,
      pageNum:1,
      columns: [
        { title: "id", key: "id", sortable: true },
        { title: "name", key: "name", editable: true },
        { title: "skuId", key: "skuId" },
        {
          title: "Handle",
          key: "handle",
          options: ["delete"],
          button: [
            (h, params, vm) => {
              return h(
                "Poptip",
                {
                  props: {
                    confirm: true,
                    title: "你确定要删除吗?"
                  },
                  on: {
                    "on-ok": () => {
                      vm.$emit("on-delete", params);
                      vm.$emit(
                        "input",
                        params.tableData.filter(
                          (item, index) => index !== params.row.initRowIndex
                        )
                      );
                    }
                  }
                },
                [h("Button", "自定义删除")]
              );
            }
          ]
        }
      ],
      tableData: []
    };
  },
  methods: {
    changepage(index) {
      getTableData(this.pageSize,index).then(res => {
        debugger;
      this.tableData = res.data.list;
      this.dataCount = res.data.dataCount;
    });
      
    console.log(pageNum)
    },
    handleDelete(params) {
      console.log(params);
    },
    exportExcel() {
      this.$refs.tables.exportCsv({
        filename: `table-${new Date().valueOf()}.csv`
      });
    }
  },
  mounted() {
    getTableData(this.pageSize,this.pageNum).then(res => {
      debugger
      this.tableData = res.data.list;
      this.dataCount = res.data.dataCount;
      console.log(this.dataCount);
    });
  }
};
</script>

<style>
</style>
